<template>
    <div id="listWrapper" class="list-wrapper" :class="{'in-weixin': (!isApp)}">
        <a href="javascript:;"  v-if="!isShowShareBtn&&isApp" class="shareGuide" @click="share"></a>
        <List :listData="listData" :basicInfo="basicInfo" v-if="listData && listData.length > 0"></List>
        <DownApp v-if="(!isApp)"></DownApp>
    </div>
</template>

<script>
    import common from '../../../assets/js/common';
    import url  from 'url';
    import qs from 'querystring';

    import drop from "../../../assets/js/dropload.min.js";
    import {Toast} from 'mint-ui';

    import List from '../components/listcomponent.vue';
    import DownApp from '../components/downapp.vue';

    export default{
        data (){
            return {
                basicInfo: {
                    appVersion: '4.1',
                    plateformType: 'both',
                    cityCode: '310100',
                    artColumn: null,
                    actionId: null
                },
                listData: [],
                shareObj: {
                    friend: {
                        title: '',
                        desc: '',
                        link: '',
                        imgUrl: ''
                    },
                    friendQuan: {
                        title: '',
                        desc: '',
                        link: '',
                        imgUrl: ''
                    }
                },
                isShowShareBtn: common.checkAppversionIsGt35(),
                isApp: common.isApp()
            };
        },
        components: {
            List: List,
            DownApp: DownApp
        },
        created (){
            let tar = url.parse(window.location.href).query;
            let tmpObj = qs.parse(tar);

            this.basicInfo.type = tmpObj.type || '1';   //栏目type
            this.basicInfo.appVersion = tmpObj.appversion || '4.1';            // 默认版本
            this.basicInfo.plateformType = tmpObj.plateformtype || 'both';   // 默认平台 both android 和 ios 都可用
            this.basicInfo.cityCode = tmpObj.citycode || '310100';            // 城市code
            this.basicInfo.artColumn = tmpObj.artcolumn || '';                // 栏目id
        },
        mounted (){
            // 定义列表的高
            this.getList();
            common.ANA_AnalyticsScan();
        },
        methods: {
            getList() {
                let page = 0;
                let _this = this;
                let listParams = {
                    type: this.basicInfo.type,
                    typeValue: this.basicInfo.artColumn,                    // 栏目id
                    cityCode: this.basicInfo.cityCode,
                    appVersion: this.basicInfo.appVersion,
                    plateformType: this.basicInfo.plateformType,
                    pageIndex: page + '',
                    pageSize: '10'
                };

                $('#listWrapper').dropload({
                    scrollArea : window,
                    domDown : {
                        domClass   : 'dropload-down',
                        domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
                        domUpdate  : '<div class="dropload-update">↓释放加载</div>',
                        domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
                        domNoData  : '<div class="dropload-noData">没有更多了</div>'
                    },
                    loadDownFn : function(me){
                        listParams.pageIndex = (page++) + '';
                        $.ajax({
                            type: 'GET',
                            url: common.isdev() + '/service/sayCars/articles/0',
                            data: listParams,
                            dataType: 'json',
                            success: function(response){
                                if (!(response.errorCode * 1)) {
                                    let result = response.result;
                                    let totalPage = Math.ceil(result.total/result.pageSize);
                                    if (page > totalPage) {
                                        me.lock();
                                        me.noData();
                                    } else {
                                        _this.listData = _this.listData.concat(result.articles);
                                    }
                                    if (page <= 1) {
                                        _this.initShare(result.columnVO);
                                        _this.initTitle(result.artColumnTitle);
                                        _this.basicInfo.actionId = result.action;
                                    }
                                    _this.$nextTick(function () {
                                        common.ANA_AnalyticsScan();
                                    });
                                    setTimeout(function(){
                                        me.resetload();
                                    }, 1000);
                                } else {
                                    Toast('服务器异常');
                                }
                            },
                            error: function(xhr, type){
                                Toast('服务器异常');
                            }
                        });
                    }
                })
            },
            initTitle(title) {
                // 初始化列表页title
                document.title = title;
            },
            initShare(shareData) {
                this.shareObj = {
                    friend: {
                        title: shareData.shareTitle,
                        desc: shareData.shareSummary,
                        link: window.location.protocol + '//' + window.location.host + window.location.pathname + '?utm_source=share&artcolumn=' + this.basicInfo.artColumn,
                        imgUrl: 'https:' + shareData.shareImg
                    },
                    friendQuan: {
                        title: shareData.shareTitle,
                        desc: shareData.shareSummary,
                        link: window.location.protocol + '//' + window.location.host + window.location.pathname + '?utm_source=share&artcolumn=' + this.basicInfo.artColumn,
                        imgUrl: 'https:' + shareData.shareImg
                    }
                };
                if(!common.isApp()){
                    common.wxShare(this);
                }else{
                    setTimeout(() => {
                        // 延迟调用 lb的展示分享按钮，不然android和ios下有一定概率无法显示，具体原因未明
                        common.appShare(this);
                    }, 1000);
                }
            },
            share:function(){
                common.appShare(this);
            }
        }
    }
</script>

<style lang="scss">
    @import '../../../assets/css/common';
    @import '../../../assets/css/dropload.css';
    body {
        background: #f5f5f5;
        .dropload-refresh, .dropload-update, .dropload-load, .dropload-noData{
            color: #8392A0;
            font-size: 13px;
        }
    }

    .list-wrapper{
        -webkit-overflow-scrolling: touch;
    }
    .shareGuide{
        width:rem(50);
        height:rem(50);
        line-height:rem(50);
        text-align:center;
        color:$_fff;
        background:transparent url("../../../assets/image/publicTest/share-icon.png") no-repeat top left;
        background-size:100% 100%;
        position:fixed;
        right:rem(5);
        top:50%;
        z-index:3;
    }
</style>
